<template>
  <div> 
    <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline" style="margin:10px 0px 0px 10px">

      <el-select v-model="id" placeholder="请选择"   @change="getXfList()"  style="margin-right:10px">
        <el-option
          v-for="item in roomList"
          :key="item"
          :label="'房间号:' +item"
          :value="item"
         >
        </el-option>
      </el-select>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getXfList()">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表数据 -->
     <el-table
      :data="tableData.list"
      border
      style="width: 100%">
<!-- 
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column> -->

    <el-table-column 
        prop="gameName"
        label="角色名称"
        width="200px">
      </el-table-column> 



      <!-- <el-table-column
        prop="magicType"
        label="仙法类型">
       <template slot-scope="scope">
            <span v-if="scope.row.magicType===1" >攻击性</span>
            <span v-if="scope.row.magicType===2" >辅助性</span>
            <span v-if="scope.row.magicType===3" >防御性</span>
            <span v-if="scope.row.magicType===4" >特殊性</span>
        </template>
      </el-table-column> -->

      <el-table-column
        label="仙法图片" >
   
        <template slot-scope="scope">
          <div class="demo-image" style="display:flex;flex-wrap:wrap;"> 
            <div class="block"  v-for="item in scope.row.roleMagicVoList" :key="item.id" style="margin-left:10px;margin-top:10px;">
              <el-badge :value="item.count" class="item">
                  <el-image
                  style="width: 100px; height: 100px;"
                  :src="item.avatar"
                ></el-image>
              </el-badge>
          </div>
        </div>
           
        </template>
      </el-table-column>

      <!-- <el-table-column
        prop="description"
        label="仙法介绍">
      </el-table-column> --> 

      <!-- <el-table-column
        prop="count"
        label="剩余数量">
      </el-table-column> -->

      <el-table-column
        label="操作"
        width="200px">
        <template slot-scope="scope" >
             <el-button  v-if="scope.row.magicIsFinish===0" type="text" @click="updateXfCount(scope.row.roleId)">兑换仙法</el-button>
             <el-button  v-if="scope.row.magicIsFinish===1" type="text" >已兑换</el-button>
        </template>
      </el-table-column>    
    </el-table>
  </div>
</template>

<script>
import xfApi from "@/api/xianfa"

export default{
    data(){
        return{
            id:1,
            //查询条件
            //表格数据
            tableData:{
                list: []
            },
            //房间号
            roomList:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
        }
    },
    created(){
       //获取所有角色列表
        // this.getAllRoleList()
        //仙法列表  
        this.getXfList()

    },
    methods:{
        //获取仙法列表
         getXfList(){
            // if(!id){
            //   this.id=0;
            // }
            this.$loading = true;
            xfApi.getXianfaList(this.id).then(res => {
                console.log(res.data.roleMagicQuery);
                //取消加载
                this.$loading = false;
                //数据赋值
                this.tableData.list = res.data.roleMagicQuery;
            }).then(error=>{
                this.$loading = false;
            })
        },

        //更新仙法数量
        updateXfCount(id){
            this.$confirm('该操作将兑换该用户所有仙法', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              xfApi.updateXfCount(id).then(res=>{
                  //提示
                  this.$message({type:"success",message:"兑换成功"})
                  //重载页面
                  this.getXfList()
              }).catch(res=>{
                  console.log(res);
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
        },
        //获取所有角色列表
        getAllRoleList(){
          xfApi.getAllRoleList().then(res =>{
              this.roleList = res.data.list;
          })
        }
        //弹窗
        // open(id,count) {
        //     if(count==0){
        //         this.$message({type:"info",message:"数量不足"})
        //     }else{
        //         this.$prompt('请输入兑换数量', '数量', {
        //             confirmButtonText: '确定',
        //             cancelButtonText: '取消'
        //         }).then(({ value }) => {
        //             if(value == null || value == ""){
        //                 this.$alert("请输入要兑换的数量")
        //             }else if(value>count){
        //                 this.$alert("剩余数量不足")
        //             }else{
                      
        //             }
        //         }).catch(() => {
        //             this.$message({
        //                 type: 'info',
        //                 message: '取消输入'
        //             });       
        //         });
        //     }
            
        // }
        
    }

}


</script>
